<template>
	<view >
		<view class="title">
			<image src="../../static/one.jpg" style="width: 50upx;height: 50upx;" @click="back()"></image>
		    <view style="font-size: 36upx;font-weight: 800;color: #333333;">商城</view>
		</view>
        <view >
            <swiper  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-color="#ffffff" indicator-active-color="#ff9f18" >
                <swiper-item class="swiper-item"  >
                    <image class="image"   :src="image[0].picture" mode="scaleToFill"></image>
                    
                </swiper-item>                     
                   <swiper-item class="swiper-item"  >
                       <image class="image" :src="image[1].picture" mode="scaleToFill"></image>
                       
                   </swiper-item>
                   <swiper-item class="swiper-item"  >
                       <image class="image" :src="image[2].picture" mode="scaleToFill"></image>
                       
                   </swiper-item>
                     <swiper-item class="swiper-item" >
                         <image class="image" :src="image[3].picture" mode="scaleToFill"></image>
                         
                     </swiper-item>
                     <swiper-item class="swiper-item">
                         <image class="image" :src="image[4].picture" mode="scaleToFill"></image>
                         
                     </swiper-item>
            </swiper>
    
        </view>
        <view style="display: flex;flex-direction: row;width: 750upx; height: 200upx;padding-top: 50upx;">
         <view style="width: 375upx;text-align: center;"><text :class="[tap?'mark-hover':'mark']"  @click="check(1)">书籍</text></view>
        <view style="width: 375upx;text-align: center;"><text :class="[tap?'mark':'mark-hover']" @click="check(0)">文件</text></view>
        </view>
        
            <view class="list" v-if="tap == 1">
            <view class="gird" v-for="item in book">
               <image :src="item.picture"  style="width: 275upx;height:200upx"></image>
                <view style="color: #333333;font-size: 26upx;font-weight: 800;line-height: 130%;">{{item.name}}</view>
                <view class="content">
                    <view style="display: flex;flex-direction: row;align-items: center;">
                      <image src="../../static/jifencolor.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                    <text style="#fca218;font-size: 28upx;">{{item.price}}</text>   
                    </view>
                    <text style="color: #999999;font-size: 24upx;">{{item.purchaseFrequency}}人想要</text>
                </view>
            </view>
            
            
        </view>
        <view class="list" v-if="tap == 0">
            <view class="gird" v-for="item in file">
               <image :src="item.picture"  style="width: 275upx;height:200upx"></image>
                <view style="color: #333333;font-size: 26upx;font-weight: 800;line-height: 130%;">{{item.name}}</view>
                <view class="content">
                    <view style="display: flex;flex-direction: row;align-items: center;">
                      <image src="../../static/jifencolor.png" mode="aspectFit" style="height: 50upx;width: 50upx;"></image>
                    <text style="#fca218;font-size: 28upx;">{{item.price}}</text>   
                    </view>
                    <text style="color: #999999;font-size: 24upx;">{{item.purchaseFrequency}}人想要</text>
                </view>
            </view>
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tap:1,
                image:[],
                pageNumfile:0,
                pageNumbook:0,
                filelimit:0,
                booklimit:0,
                file:[],
                book:[] 
			}
		},
		methods: {
			check(item){
                this.tap = item;
                this.getdata(item);
                
                
                
                
            },
            back(){
                uni.navigateBack({ })
            },
            getdata(type){
                if(type == 1){
                 
                 let  {pageNumbook} = this; 
                  let  c = this;
                    
                    this.$api.test({
                    url:"me/ObtainCommodity",
                    data:{
                     jude:"0",
                     pageNum:pageNumbook,
                     pageLimit:"6"
                     
                    },
                    method:"GET"
                    // header:{
                    //     "Content-Type":"application/x-www-form-urlencoded"
                    // }
                                          }).then((res) =>{
                                            
                                            c.pageNumbook ++;
                                              console.log(JSON.stringify(res.data));
                                              
                                              if(res.data.length == 0){
                                                  c.booklimit = 1;
                                              }
                                              
                                             if(c.book.length == 0){
                                                 console.log("进来")
                                                  c.book = res.data;
                                                 
                                                  
                                                  
                                             }else{
                                                 c.book = c.book.concat(res.data);
                                             }       
                                            
                                          })   
                }
                if(type == 0){
                   let  {pageNumfile} = this;
                    let  c = this;
                      
                      this.$api.test({
                      url:"me/ObtainCommodity",
                      data:{
                       jude:"1",
                       pageNum:pageNumfile,
                       pageLimit:"6"
                       
                      },
                      method:"GET"
                      // header:{
                      //     "Content-Type":"application/x-www-form-urlencoded"
                      // }
                                            }).then((res) =>{
                                                
                                                c.pageNumfile ++;
                                                console.log(res.data);
                                              if(res.data.length == 0){
                                                   c.filelimit = 1;
                                               }
                                               
                                              if(c.file.length == 0){
                                                   c.file = res.data;
                                              }else{
                                                  c.file = c.file.concat(res.data);
                                              }       
                                            })   
                }
            }
		},
        beforeMount() {
            let c = this;
            
            this.getdata(1);
            
            this.$api.test({
            url:"me/GoodsBy",
            data:{
             
            },
            method:"GET"
            // header:{
            //     "Content-Type":"application/x-www-form-urlencoded"
            // }
                                  }).then((res) =>{
                                      console.log(JSON.stringify(res.data))
                                    c.image = res.data;
                                  })                   
        
       
        },
        onReachBottom(){
            
            if(this.tap == 1 && this.booklimit == 0 ){
                this.getdata(1);
            }
            
            if(this.tap == 0 && this.filelimit == 0 ){
                this.getdata(0);
            }
            
            }
	}
</script>

<style>
    page{
        background-color: #f7f6fc;
    }
 .title{
        padding-left: 30upx;
        display: flex;
        flex-direction: row;
        padding-right: 30upx;
        padding-top: 30upx;
        align-items: center;
        width: 750upx;
        background-color: #fcfcfc;
        padding-bottom: 30upx;
        margin-top: 30upx;
        }
        .mark{
            color: #333333;
            font-size: 30upx;
            font-weight: 800;
        }
        .mark-hover{
            color: #333333;
            font-size: 30upx;
            padding-bottom: 10upx;
            border-bottom: #fe9f18 solid 4upx;
            width: 150upx;
            font-weight: 800;
        }
        .list{
            display: flex;
            flex-direction: row;
           flex-wrap: wrap;
            width: 750upx;
            margin-top: -50upx;
            padding-left: 40upx;
            padding-right: 40upx;
            justify-content: space-between;
        }
        .gird{
            width: 300upx;  
           padding-bottom: 30upx;
          
        }
        .content{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 20upx;
        }
        .image-center{
            
            width: 750upx;
            justify-content: center;
            display: flex;
        }
        .image{
           width: 670upx;
           margin-left: 40upx;
            margin-right: 40upx;
             border-radius: 50upx;
             height: 300upx;
        }
</style>
